<template>
  <div class="common-layout">
    <el-carousel
      :interval="6000"
      :autoplay="autoPlay"
      arrow="always"
      height="845px"
    >
      <el-carousel-item v-for="(item, idx) in carouselList" :key="idx">
        <div class="banner-item">
          <!-- 设置背景图或默认背景 -->
          <div
            class="banner-bg"
            :style="{
              backgroundImage: imageLoaded[idx]
                ? `url(${item})`
                : 'linear-gradient(to right, #007bba, #004d7d)',
            }"
          ></div>

          <!-- 隐藏图片用于监听加载状态 -->
          <img
            :src="item"
            @load="onImageLoad(idx)"
            @error="onImageError(idx)"
            class="hidden-img"
            alt="预加载"
          />

          <div class="overlay">
            <!-- 第一个 banner -->
            <template v-if="idx === 0">
              <h1 class="banner-title-simple">专注进出口贸易数据统计分析</h1>
              <span class="stepH">
                专门从事外贸进出口数据查询和提供数据分析及商业决策的国际经贸类大数据平台
              </span>
            </template>

            <!-- 第二个 banner -->
            <template v-else>
              <h1 class="banner-title">让每份报告，都成为您的数字资产</h1>
              <div class="steps">
                <span class="step"><em>01</em> 上传报告</span>
                <span class="step"><em>02</em> 通过审核</span>
                <span class="step"><em>03</em> 立即变现</span>
                <el-button class="upload-btn" type="primary" size="small" @click="handleUpload">
                  上传报告
                </el-button>
              </div>
            </template>

            <!-- 搜索框 -->
            <div v-if="idx < 2" class="search-wrapper">
              <el-select
                v-model="searchType"
                class="search-select"
                size="large"
                placeholder="查数据"
              >
                <el-option label="查数据" value="data" />
                <el-option label="看报告" value="report" />
              </el-select>
              <el-input
                v-model="searchKeyword"
                class="search-input"
                size="large"
                placeholder="请输入关键词进行搜索"
                clearable
                @focus="autoPlay = false"
                @blur="autoPlay = true"
                @keyup.enter="handleSearch"
              >
                <template #append>
                  <el-button
                    type="primary"
                    size="large"
                    class="search-btn"
                    @click="handleSearch"
                  >
                    <el-icon class="search-icon"><Search /></el-icon>
                    搜索
                  </el-button>
                </template>
              </el-input>
            </div>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script setup>

import { Search } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { ref , onMounted } from 'vue'
import banner1 from '../../assets/xwimg/banner1.png'
import banner2 from '../../assets/xwimg/banner2.png'

const carouselList = [banner1, banner2]
const searchType = ref('看报告')
const searchKeyword = ref('')
const autoPlay = ref(true)
const router= useRouter()

// 图片加载状态数组
const imageLoaded = ref(carouselList.map(() => false))

const onImageLoad = (index) => {
  imageLoaded.value[index] = true
}

const onImageError = (index) => {
  imageLoaded.value[index] = false
}
// 搜索处理方法
const handleSearch = () => {
  if (!searchKeyword.value.trim()) {
    return ElMessage.warning('请输入搜索关键词')
  }

  const routeParams = {
    query: {
      keyword: encodeURIComponent(searchKeyword.value.trim())
    }
  }


  if (searchType.value === '查数据') {
    router.push({
      path: 'dataquery',
      ...routeParams
    })
  } else {
    router.push({
      path: 'report/productView',
      ...routeParams
    }) 
  }

  // 清空搜索条件
  searchKeyword.value = ''
}

const handleUpload = () => {
  router.push('/AuthorServices')
}

</script>

<style scoped lang="scss">
.common-layout {
  width: 100%;
  .el-carousel {
    .el-carousel__container {
      position: relative;
    }
  }
}

.banner-item {
  width: 100%;
  height: 845px;
  position: relative;
  overflow: hidden;

  .banner-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: background-image 0.3s ease;
    z-index: 0;
  }

  .hidden-img {
    display: none;
  }

  .overlay {
    z-index: 1;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 180px;
    color: #fff;
    text-align: center;
    // background: rgba(0, 0, 0, 0.2);
  }
}

.banner-title-simple {
  color: #004d7d;
  font-size: 55px;
  font-weight: 800;
  

  // text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #fff;
}

.stepH {
  margin-top: -16px;
  font-weight: 600;
  font-size: 24px;
  line-height: 100%;
  text-align: center; 
 
}

.banner-title {
  font-size: 50px;
  font-weight: 500;
  margin-bottom: 24px;
}

.steps {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;

  .step {
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 14px;

    em {
      width: 24px;
      height: 24px;
      text-align: center;
      line-height: 24px;
      margin-right: 6px;
      border: 1px solid #fff;
      border-radius: 50%;
      font-style: normal;
    }
  }

  .upload-btn {
    margin-left: 24px;
    background-color: #fff;
    color: #0080d1;
    font-weight: 500;
  }
}

.search-wrapper {
  position: fixed;
  top: 370px;
  width: 80%;
  max-width: 1000px;
  min-width: 800px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 3px;

  .search-select {
    width: 110px;
    ::v-deep(.el-select__wrapper) {
      height: 50px;
      font-weight: 500;
      font-size: 16px;
    }
  }

  .search-input {
    height: 50px;
    flex: 1;
  }
}

.search-btn {
  color: #0080d1 !important;
  height: 50px;

  .search-icon {
    margin-right: 8px;
    font-size: 18px;
  }
}
</style>
